<template>
  <div class="course-box">
    <a-collapse
      class="parent-collapse"
      :bordered="false"
      expandIconPosition="right"
    >
      <a-collapse-panel key="1">
        <template #header>
          <span>WPS精品教程视频合集</span>
        </template>
        <a-collapse :bordered="false" expandIconPosition="right">
          <a-collapse-panel
            header="第一章   WPS 入门"
            v-for="item in 4"
            :key="item"
          >
            <ul class="course-ul">
              <li v-for="item in 4" :key="item">
                第一节 WPS文字处理之初识（1）
              </li>
            </ul>
          </a-collapse-panel>
        </a-collapse>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="This is panel header 2">
      </a-collapse-panel>
      <a-collapse-panel key="3" header="This is panel header 3">
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<style lang="scss" scoped>
.course-box {
  .parent-collapse {
    background-color: #fff;
    :deep {
      > .ant-collapse-item {
        background: #f6f6f6;
        margin-bottom: 20px;
        border: 0 none;
        > .ant-collapse-header {
          padding: 0 16px;
          font-size: 16px;
          height: 50px;
          line-height: 50px;
          color: #333333;
        }
        > .ant-collapse-content {
          background-color: #fff;
        }
      }
    }
    :deep(.ant-collapse-content-box) {
      padding-top: 10px;
      padding-left: 0;
      padding-right: 0;

      padding-bottom: 0;

      .ant-collapse-borderless {
        background-color: #fff;
      }
      .ant-collapse-item {
        border: 0 none;
        margin-bottom: 10px;
        .ant-collapse-content-box {
          box-sizing: border-box;
          border: 1px solid #eeeeee;
          position: relative;
          &::before {
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            top: -6px;
            left: 25px;
            margin: auto;
            background: #fff;
            transform: rotate(45deg);
            // box-shadow: -2px -2px 5px -1px rgba(0, 0, 0, 0.2);
          }
        }
      }
      .ant-collapse-header {
        font-size: 14px;
        color: #333333;
        padding: 0;
        height: 38px;
        line-height: 38px;
        background: #f6f6f6;
        padding-left: 23px;
      }
    }

    .course-ul {
      list-style: none;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      padding-left: 44px;
      padding-right: 30px;
      background-color: #fff;

      li {
        list-style: none;
        margin: 0;
        padding: 0;
        height: 44px;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: #333333;
        line-height: 44px;
        box-sizing: border-box;
        border-bottom: 1px solid #eeeeee;
        &:last-child {
          border: 0 none;
        }
      }
    }
  }
}
</style>
